<template>
  <div class="login-bg">
    <div class="card shadow-lg p-4" style="width: 380px;">
      <div class="card-body">
        <h3 class="card-title text-center mb-4">Pubot发版工具</h3>

        <div v-if="errorMsg" class="alert alert-danger py-2 text-center" role="alert">
          {{ errorMsg }}
        </div>

        <form @submit.prevent="login">
          <div class="mb-3 input-group">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <input
              type="text"
              class="form-control"
              placeholder="用户名"
              v-model="username"
              :disabled="loading"
            />
          </div>

          <div class="mb-3 input-group">
            <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
            <input
              type="password"
              class="form-control"
              placeholder="密码"
              v-model="password"
              :disabled="loading"
            />
          </div>

          <button type="submit" class="btn btn-primary w-100 d-flex justify-content-center align-items-center" :disabled="loading">
            <span v-if="!loading">登录</span>
            <span v-else class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { loginApi } from '@/api/auth'
import { useToastStore } from '@/store/toast'

const router = useRouter()
const username = ref('')
const password = ref('')
const errorMsg = ref('')
const loading = ref(false)
const toastStore = useToastStore()
const userStore = useUserStore()

async function login() {
  errorMsg.value = ''
  if (!username.value || !password.value) {
    errorMsg.value = '请输入用户名和密码'
    return
  }

  loading.value = true
  try {
    const res = await loginApi({ username: username.value, password: password.value })
    if (!res?.token) {
      errorMsg.value = '登录失败：未返回 token'
      toastStore.showToast('登录失败，未返回 token', 'danger')
      loading.value = false
      return
    }
    localStorage.setItem('token', res.token)

    // 登录成功后拉取当前用户信息
    await userStore.fetchUser()

    toastStore.showToast('登录成功', 'success')
    router.push('/')
  } catch (err) {
    console.error(err)
    errorMsg.value = '登录失败，请检查用户名或密码'
    toastStore.showToast('登录失败，请检查用户名或密码', 'danger')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  background: linear-gradient(135deg, #4b6cb7, #182848);
}

.card {
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.95);
}

.input-group .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(75, 108, 183, 0.25);
  border-color: #4b6cb7;
}

button span {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
